<template>
	<view class="projectDetails">
		<view class="uname">
			<text>项目名称:</text>
			<!-- <text>{{projects.items_title}}</text> -->
			<input type="text" v-model="projects.items_title" :disabled="disabledFalse" />
		</view>
		<view class="price">
			<text>项目价格:</text>
			<text class="priceTxt">￥</text>
			<input type="text" v-model="projects.price" :disabled="disabledFalse" />
		</view>
		<view class="title">
			<text>项目内容:</text>
			<input type="text" v-model="projects.content" :disabled="disabledFalse" />
		</view>
		<view class="icon">
			<text>项目图片:</text>
			<view>
				<image v-if="projects.image_url" :src="projects.image_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
				<view v-if="jiahaos  == 1" class="jiahaoAdd" @click="clinicmaingraph">+</view>
			</view>

		</view>
		<view class="image">
			<text>项目详情图：</text>
			<view v-for="(item,index) in list" :key="item.id">
				<image :src="item" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
				<icon v-if="activeIcon" class="clears" type="clear" size="18" @click="clears(index)" />
			</view>
			<view v-if="jiahaos  == 1" class="jiahao" @click="picturedetailsImg">+</view>
			<view class="addImages">
			</view>
		</view>

		<view v-if="deitBtns" class="editBtn" @click="editBtn">
			<text>编辑</text>
		</view>

		<view v-if="doubleButton" class="doubleButton">
			<text @click="preview" :class="actives == 0 ? 'noactive': 'active'">取消编辑</text>
			<text @click="deit" :class="actives == 1 ? 'noactive': 'active'">编辑完成</text>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// 获取oos上传
			this.uploadOosMethos();
			this.projects = JSON.parse(decodeURIComponent(options.pro));
			console.log(`??????`)
			console.log(this.projects);
			console.log(`??????`)
			this.list = this.projects.num_url.split(",");
			console.log(`数组的问题了`)
			console.log(this.list);
			console.log(this.list.length);
			console.log(`数组的问题了`)
		},
		data() {
			return {
				// 是否激活状态
				jiahaos: 0,
				disabledFalse: true,
				projects: null,
				replace: false,
				deitBtns: true,
				doubleButton: false,
				actives: 0,
				activeIcon: 0,
				list: null,
				mainImg: "https://picsum.photos/100/100?random=9",

				picturedetailsImgs: [],

				// 上传的图片设置
				host: null,
				OSSAccessKeyId: null,
				dir: null,
				policy: null,
				signature: null,
			};
		},
		methods: {
			// 获取oos的地址
			async uploadOosMethos() {
				let fileGetUrl = await this.$myrequest({
					url: `File/get`
				});
				this.host = fileGetUrl.data.data.host;
				this.OSSAccessKeyId = fileGetUrl.data.data.accessid;
				this.dir = fileGetUrl.data.data.dir;
				this.policy = fileGetUrl.data.data.policy;
				this.signature = fileGetUrl.data.data.signature;
			},
			jumpProjectManagement() {
				uni.redirectTo({
					url: "../projectManagement1/projectManagement1"
				})
			},
			editBtn() {
				this.jiahaos = 1;
				this.replace = true;
				this.deitBtns = false;
				this.doubleButton = true;
				this.activeIcon = 1;
				this.disabledFalse = false;
				console.log(`编辑内容了。。。`);
			},
			preview() {
				this.jiahaos = 0;
				this.replace = false;
				this.deitBtns = true;
				this.doubleButton = false;
				this.activeIcon = 0;
				this.disabledFalse = true;
				console.log(`取消编辑`)
			},

			async deit() {
				this.disabledFalse = true;
				if (this.projects.items_title === "" || this.projects.items_title === null) {
					uni.showToast({
						title: "项目名称必填",
						icon: "none"
					})
					return false;
				};
				if (this.projects.price === "" || this.projects.price === null) {
					uni.showToast({
						title: "项目价格必填",
						icon: "none"
					})
					return false;
				};
				if (isNaN(this.projects.price)) {
					uni.showToast({
						title: "价格必须为数字",
						icon: "none"
					})
					return false;
				};
				if (this.projects.content === "" || this.projects.content === null) {
					uni.showToast({
						title: "项目内容必填",
						icon: "none"
					})
					return false;
				};
				if (this.projects.num_url.length === 0) {
					uni.showToast({
						title: "项目详情图必填",
						icon: "none"
					})
					return false;
				};

				let datas = {
					id: this.projects.id,
					title: this.projects.items_title,
					price: this.projects.price,
					content: this.projects.content,
					image_url: this.projects.image_url,
					num_url: this.list.toString(),
					category_id: this.projects.category_id
				};
				let res = await this.$myrequest({
					url: "Mianpage/editProject",
					data: datas
				});
				console.log(res);
				if (res.data.code == 200) {
					uni.redirectTo({
						url: "../projectManagement1/projectManagement1"
					});
				}
			},
			// 点击小图标删除图片
			clears(index) {
				let emptyArr = [];
				// 数组去掉其中的一个返回其他剩余的元素
				if (this.list.length === 1) {
					uni.showToast({
						title: "项目详情图必填",
						icon: "none"
					})
					return false;
				};
				for (let [key, value] of Object.entries(this.list)) {
					console.log(key);
					if (index != key) {
						emptyArr.push(value);
					};
				};
				this.list = emptyArr;
			},
			// 删除主图
			clearMainImg() {
				this.mainImg = null;
			},

			// ==诊所主图==
			async clinicmaingraph() {
				let self = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						this.projects.image_url = res.tempFilePaths;

						let fileName = `${Date.now()}${res.tempFilePaths[0].substr(-4)}`;
						let key = `${self.dir}${fileName}`;

						uni.uploadFile({
							url: self.host,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								key,
								policy: self.policy,
								OSSAccessKeyId: this.OSSAccessKeyId,
								signature: this.signature
							},
							success: (uploadFileRes) => {
								self.projects.image_url = `${self.host}/${self.dir}${fileName}`;
								// self.projects.image_url = JSON.parse(uploadFileRes.data).msg;
								console.log(`修改图片成功了`);
							}
						});

					}
				});
			},
			// --诊所主图--


			// 添加详情图片
			async picturedetailsImg() {
				let self = this;
				uni.chooseImage({
					count: 4,
					success: res => {
						this.list = res.tempFilePaths;
						for (let [keys, value] of Object.entries(res.tempFilePaths)) {

							let fileName = `${Date.now()+1}${value.substr(-4)}`;
							let key = `${self.dir}${fileName}`;
							this.picturedetailsImgs.push(`${self.host}/${self.dir}${fileName}`);
							uni.uploadFile({
								url: self.host,
								filePath: value,
								name: 'file',
								formData: {
									key,
									policy: self.policy,
									OSSAccessKeyId: this.OSSAccessKeyId,
									signature: this.signature
								},
								success: res => {
									console.log(`好虐了`);
									// this.picturedetailsImgs.push(JSON.parse(uploadFileRes.data).msg);
									// self.projects.num_url.push(JSON.parse(uploadFileRes.data).msg);
									// self.list.push(JSON.parse(uploadFileRes.data).msg);
								}
							});

						};

						self.projects.num_url = this.picturedetailsImgs;
					},
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.projectDetails {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		padding: 0 40rpx;
		overflow: hidden;

		>view {
			margin-top: 30rpx;
		}
	}

	.uname,
	.price,
	.title {
		display: flex;
		align-items: center;
		font-size: 28rpx;

		>text {
			&:first-of-type {
				color: #999999;
				margin-right: 30rpx;
			}
		}
	}

	.price {
		position: relative;

		>input {
			color: #BD0000;
		}

		.priceTxt {
			color: #BD0000;
		}
	}

	.title {
		flex-wrap: wrap;

		>text {
			&:last-of-type {
				width: 100%;
				color: #333333;
			}
		}
	}

	.icon,
	.image {
		display: flex;
		flex-wrap: wrap;

		>text {
			&:first-of-type {
				width: 100%;
				color: #999999;
			}
		}

		view {
			margin-top: 20rpx;
			position: relative;

			&:not(:first-of-type) {
				margin-left: 20rpx;
			}

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
		}
	}

	.editBtn {
		@include dibuanniu;
		width: 689rpx;
	}

	.doubleButton {
		@include dibusuananniu;
		bottom: 50rpx;
	}

	// 不激活
	.noactive {
		@include dibusuananniuNoActivation;
	}

	// 激活
	.active {
		@include dibusuananniuActivation;
	}

	// 删除小按钮
	.clears {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.addImages {
		width: 180rpx;
		height: 180rpx;
		border-color: 1rpx;
	}

	.icon {
		>view {
			&:first-of-type {
				display: flex !important;
				align-items: center;
			}
		}
	}

	.jiahaoAdd {
		display: inline-block;
		margin-top: 0 !important;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx dashed #C6C6CA;
		margin-left: 20rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		color: #BBBCBD;
	}

	.jiahao {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx dashed #C6C6CA;
		margin-left: 20rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		color: #BBBCBD;
	}
</style>
